<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>

    <style type="text/css">
        hr {
            height: 5px;
            background-color: red;
        }
    </style>

    <style type="text/css">
        #e {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(-45deg);
            position: absolute;
            top: 30px;
            left: 30px;
        }

        #f {
            margin: 0;
            width: 5px;
            height: 145px;
            background-color: white;
            position: relative;
            left: 70px;
        }

        #g {
            width: 300px;
            height: 5px;
            background-color: white;
            position: absolute;
            left: 0;
            top: 78px;
        }
    </style>

    <style type="text/css">
        #smiley {
            width: 300px;
            height: 300px;
            background-color: black;
            box-sizing: border-box;
            border-radius: 50%;
            padding-top: 50px;
            text-align: center;
        }

        #scarf {
            height: 50px;
            width: 300px;
            background-color: red;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        #eyes div {
            margin: 0 40px;
            display: inline-block;
            width: 45px;
            height: 45px;
            background-color: white;
            border-radius: 50%;
        }

        #mouth {
            width: 150px;
            height: 30px;
            margin: 100px auto;
            background-color: white;
            border-radius: 10px;
        }
    </style>

    <style type="text/css">
        #diamond section div {
            display: inline-block;
            margin: 1px;
        }

        #a {
            border-left: 50px solid transparent;
            border-bottom: 50px solid red;
        }

        #b {
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;
        }

        #c {
            border-left: 50px solid transparent;
            border-top: 50px solid red;
        }

        #d {
            border-right: 50px solid transparent;
            border-top: 50px solid red;
        }
    </style>

    <style type="text/css">
        #homemade-navigation-bar {
            background-color: black;
            text-align: center;
        }

        #homemade-navigation-bar li {
            display: inline;
            margin: 0 20px;
        }

        #homemade-navigation-bar li a {
            color: white;
            text-decoration: none;
        }
    </style>

    <style type="text/css">
        #character-profile-table table, td, th {
            border: 2px solid red;
        }

        table {
            width: 830px;
            border-collapse: collapse;
            table-layout: fixed;
            text-align: center;
        }
    </style>

</head>
<body>

<section id="da">
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
</section>

<hr/>

<section id="smiley">
    <div id="scarf"></div>
    <div id="eyes">
        <div></div>
        <div></div>
    </div>
    <div id="mouth"></div>
</section>

<hr/>
<section id="diamond">
    <section id="above">
        <div id="a"></div>
        <div id="b"></div>
    </section>
    <section id="following">
        <div id="c"></div>
        <div id="d"></div>
    </section>
</section>

<hr/>

<nav id="homemade-navigation-bar">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">咨询</a></li>
        <li><a href="#">成绩</a></li>
        <li><a href="#">系统</a></li>
    </ul>
</nav>


<hr/>

<table id="character-profile-table">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>001</td>
        <td>赵四</td>
        <td>男</td>
        <td>58</td>
        <td>亚洲舞王</td>
    </tr>
    <tr>
        <td>002</td>
        <td>大脚</td>
        <td>女</td>
        <td>18</td>
        <td>大脚超市</td>
    </tr>
    <tr>
        <td>003</td>
        <td>广坤</td>
        <td>男</td>
        <td>58</td>
        <td>广坤山货</td>
    </tr>
    <tr>
        <td>004</td>
        <td>谢飞机</td>
        <td>男</td>
        <td>5</td>
        <td>这是谢广坤的孙子，是一个非常神奇的孩子</td>
    </tr>
    <tr>
        <td>005</td>
        <td>谢兰</td>
        <td>女</td>
        <td>38</td>
        <td>这是谢广坤的女儿</td>
    </tr>
</table>

</body>
</html>